<template>
  <div class="handwriting-item">
    <div class="handwriting-inner">
      <ExpressionEmoji :icon="icon" class="score-img"  v-if="emojiVisible" />
      <img class="word-img" :src="wordImage" alt="" v-if="imageVisible" />
    </div>
    <div class="handwriting-label" v-if="textVisible" :class="label === '已完成' ? '' : ''">{{ label }}</div>
    <slot name="popover"></slot>
  </div>
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from "vue";
  import {storage} from "@/utils/Storage";
  import ExpressionEmoji from "@/views/components/ExpressionEmoji/index.vue";

  const props = defineProps({
    label: {
      type: String,
      default: '未完成',
    },
    image: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    emojiVisible: {
      type: Boolean,
      default: true,
    },
    textVisible: {
      type: Boolean,
      default: true,
    },
    imageVisible: {
      type: Boolean,
      default: true,
    },
    // 是否为模版字
    isTemplateUrl: {
      type: Boolean,
      default: false,
    },
    // 是否延迟加载图片
    lazyLoad: {
      type: Boolean,
      default: false,
    },
  });
  const wordImage = computed(() => {
    return props.isTemplateUrl ? props.image : storage.get('root-src') + '/tempFile/' + props.image
  })
  onMounted(() => {
  })
</script>

<style scoped lang="less">
  .handwriting-item {
    padding-top: 8px;
    cursor: pointer;
    .handwriting-inner {
      width: 96px;
      height: 96px;
      background: url('@/assets/img/handwriting-bg.png') center center no-repeat;
      background-size: 100% 100%;
      position: relative;
    }
    .handwriting-label {
      margin-top: 8px;
      font-size: 18px;
      line-height: 18px;
      text-align: center;
    }
    .score-img {
      position: absolute;
      width: 30px;
      height: 30px;
      top: -15px;
      left: 33px;
      z-index: 3;
    }
    .word-img {
      position: absolute;
      width: 96px;
      height: 96px;
      top: 0;
      left: 0;
      z-index: 2;
    }
    .canvas-wrap{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      overflow: hidden;
    }
    canvas {
      position: absolute;
      width: 96px;
      height: 96px;
      top: 0;
      left: 0;
      //background-color: #000;
    }
  }
</style>
